<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
</head>
<body>
<h2>带边框分页</h2>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
</ul>
<h2>面包屑导航</h2>
<ul class="breadcrumb">
    <li><a href="#">首页 </a></li>
    <li><a href="#">前端 </a></li>
    <li><a href="#">HTML 教程 </a></li>
    <li>HTML 段落</li>
</ul>

<style>
    .breadcrumb li{
        display: inline-block;
    }
    .breadcrumb li:not(.breadcrumb li:last-child)::after{
        content: "/";
    }
    body{
        text-align:  center;
    }
  .pagination{
      display: inline-block;
      padding: 0;
      margin:0;
  }
    .pagination li{
        display: inline;
    }
    .pagination li a{
        padding: 50px 100px;
        border:1px solid black;

        font-size:50px
    }
  ul.pagination li a:hover:not(.active) {background-color: #ddd;}
  ul.pagination li a.active {
      background-color: #4CAF50;
      color: white;
      border: 1px solid #4CAF50;
  }
</style>
</body>
</html>